<template>
  <div class="choiceness"><Bb/>
<div class="tt">
  <div class="top">
      <div class="searchs">
          <router-link to="/sousuo"><div class="left" >
          <img src="../../public/sou.png" alt="">
          <span>生鲜本能Instinct</span>
        </div></router-link>
         
        <div class="right">
          <span> </span>
        </div>
      </div>
    </div>
    <div class="containt">
       <div class="swipe">
      <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(item,i) in images" :key="i">
              <img v-lazy="item" />
            </van-swipe-item>
      </van-swipe>
    </div>
      <div class="title">

        <img src="../../public/title.png"/>
        <span><img src="../../public/arrow.png" /></span>
      </div>
    </div>
    <div class="border"></div>

</div>
    <Gongge/>

    <div class="nuandong">
      <img src="@/../public/gongge/gifgif.gif"/>
    </div>

<div class="guohuo">
  <Guohuo/>
</div>
  <div class="gengduo">
    <Gengduo/>

  </div>
  <div class="xinxuan">
   <Xinxuan/>
  </div>
  <div class="fengqiang">
    <Fengqiang v-for=" v in title" :key="v.id" :title="v.title" :time="v.time" :status="v.status" :id="v.id"/>
    
  </div>
  <div class="miaoji">
    <Miaoji/>


  </div>
  <div class="cainixihuan">
    <p>猜你喜欢</p>
    <ul>
      <li v-for="(v,i) in cainixihuan" :key="i" >
        <Cainixihuan :imgurl="v.imgurl" :title="v.title" :type1="v.type1" :type2="v.type2" :type3="v.type3" :price="v.price" :rela="v.rela"/>
        
      </li>
    </ul>
  </div>
  <div class="zhanwei"></div>
  </div>

</template>

<script>
import Guohuo from "@/components/guohuo/guohuofu.vue"
import Gengduo from "@/components/gengduo/gengduofu.vue"

import Gongge from "@/components/gongge/gonggefu.vue"
import Miaoji  from "@/components/miaoji/miaojifu.vue"
import Xinxuan from "@/components/xinxuan/xinxuanfu.vue"
import Fengqiang from "@/components/fengqiang/fengqiangfu.vue"
import Cainixihuan from '../components/cainixihuan.vue'
export default {
   data() {
    return {
      title:[
        {id:1,title:"每日疯抢",time:"11点场",status:"正在疯抢"},
        {id:2,title:"邀请砍价",time:"",status:""}
      ],
      cainixihuan:[
        {imgurl:"home/xh1.jpg",title:"醇粹Purich  金标无麸系列 ",type1:"大型犬",type2:"中型犬",type3:"成犬",price:"¥478",rela:"入选狗宝过年大餐榜"},
        {imgurl:"home/xh2.jpg",title:"比瑞吉俱乐部 健康膳食配方 成犬粮 10kg",type1:"全体型犬",type2:"成犬",type3:"鸡肉",price:"¥219",rela:"入选狗粮品牌集合榜单"},
        {imgurl:"home/xh3.jpg",title:"醇粹Purich  金标无麸系列 全价大型成犬粮 15kg",type1:"大型犬",type2:"中型犬",type3:"成犬",price:"¥478",rela:"入选狗宝过年大餐榜"},
        {imgurl:"home/xh4.jpg",title:"醇粹Purich  金标无麸系列 全价大型成犬粮 15kg",type1:"大型犬",type2:"中型犬",type3:"成犬",price:"¥478",rela:"入选狗宝过年大餐榜"},
        {imgurl:"home/xh5.jpg",title:"醇粹Purich  金标无麸系列 全价大型成犬粮 15kg",type1:"大型犬",type2:"中型犬",type3:"成犬",price:"¥478",rela:"入选狗宝过年大餐榜"},
        {imgurl:"home/xh6.jpg",title:"醇粹Purich  金标无麸系列 全价大型成犬粮 15kg",type1:"大型犬",type2:"中型犬",type3:"成犬",price:"¥478",rela:"入选狗宝过年大餐榜"},
      ],

      images: [
      require('@/assets/lb/lb1.jpg'),
       require('@/assets/lb/lb2.jpg'),
       require('@/assets/lb/lb3.jpg'),
       require('@/assets/lb/lb4.jpg'),
       require('@/assets/lb/lb5.jpg'),
       require('@/assets/lb/lb6.jpg')
      ]}
  },
  components:{
   Miaoji, Gongge,Guohuo,Gengduo,Xinxuan,Fengqiang,Cainixihuan
  }
}
</script>

    Cainixihuan
<style lang="scss" scoped>
.choiceness{
  width: 100%;
  overflow: hidden;
 
  .top{
    height: .3rem;
    // background-color: hotpink;
        margin: 0 .14rem;
    padding-top: .1rem;
    margin-bottom: .15rem;
    
    .left{
      width:3rem ;
      height: .3rem;
      border-radius: .2rem;
       padding:.05rem .1rem;
       float: left;
       background-color: #f7f7f7;
      img{
        width: .1rem;
        height: .1rem;
      }
      span{
        font-size: .12rem;
        color: #666;
        padding-left: .1rem;
      }
    }
    .right{
      height: .25rem;
      width: .25rem;
      margin-left: .1rem;
      float: right;
      margin-top: .03rem;
      // margin-right: .1rem;
      span{
        width: .25rem;
        display: inline-block;
        height: .25rem;
        background-image: url(../../public/newsw.png);
        background-size: .25rem .25rem;
      }
    }
  }
  .containt{
      padding: 10px 10px;
      .swipe{
      height: 1.5rem;
      width: 100%;
      .van-swipe-item{
        img{
          width: 100%;
          height: 1.5rem;
        }
      }
    }
    .title{
      width: 100%;
      height:.58rem;
      margin-bottom: .15rem;
      position: relative;
      img{
        width: 100%;
        height: .58rem;
      }
      span{
        position: absolute;
        right: .2rem;
        top: 0;
        img{
          width: .36rem;
          height: .45rem;
        }
      }
    }


  }
  .tt{
     background-color: #ce433d;
  }
   .border{
     width: 100%;
     
     border-top: 1px solid #ccc;
   }

.nuandong{
  img{
    width: 100%;
    height: .75rem;
  }
}
.gengduo{
 
  width: 100%;
}

// .zhanwei{
//     height: .5rem;
//   }
  .xinxuan{
    width: 100%;
    padding: .1rem;
    background-color: #ce433d;
    padding-bottom: .6rem;
    border-bottom: 1px solid #ccc;
  }
  .fengqiang{
    padding: .1rem;
    background-color: #ce433d;
    width: 100%;
    height: 3.55rem;
  }
  .miaoji{
    padding: .1rem;
    background-color: #ce433d;
    width: 100%;
  }
  .cainixihuan{
    width: 100%;
    padding-right: .1rem;
    overflow: hidden;
    // height: 4rem;
    background-color: #ce433d;
    p{
      line-height: .45rem;
      height: .45rem;

    }
    ul{
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      margin: auto;
      li{
        flex: 1;
        width: 45%;
        margin-bottom: .1rem;
        margin-left: .1rem;
      }
    }
  }
}
</style>